<template>
	<view>
		<view class="content">
			<view class="head_info">
				<u-avatar size="100" :src="info.outimg" :show-sex="info.anonymous == 1 ? true : false" :sex-icon="info.gender == 0 ? 'man' : 'woman'"></u-avatar>
				<view class="info_right">
					<view class="name">
						<view>{{ info.name }}</view>
						<view class="toUserInfo" v-if="info.anonymous == 1 && !$status" @click="$to('/pages/detailed/detailed?id=' + info.u_id)">查看资料</view>
					</view>
					<view class="date">
						<view class="authority" v-if="info.authority && !$status">{{ info.authority }}</view>
						<u-icon name="clock"></u-icon>
						<span style="margin-left: 10rpx;"><uni-dateformat :threshold="[600000, 3600000]" :date="info.create_time"></uni-dateformat></span>
					</view>
				</view>
			</view>
			<view class="info_content">
				<view v-if="info.head_img" class="hidden_img" @click="hidden = !hidden">
					<view class="hidden_title">
						<view class="left">封面</view>
						<view class="right"><u-icon name="arrow-right" class="icon" :class="{ active: hidden }"></u-icon></view>
					</view>
					<image v-show="hidden" style="width: 100%;height: auto;margin-top: 20rpx;" :src="info.head_img" @click.stop="$viewImg(info.head_img)" mode="widthFix"></image>
				</view>
				<view class="public_head">
					<span class="title">内容</span>
					<view class="wall" v-if="!$status" :style="{ backgroundColor: info.wall_color || '#ee5253' }">{{ info.wall_title }}</view>
				</view>
				<view class="title">{{ info.title }}</view>
				<view class="text"><u-parse :use-cache="true" :lazy-load="true" :show-with-animation="true" :selectable="true" :html="info.content" :tag-style="style"></u-parse></view>
				<view class="share">
					<button class="item" open-type="share">
						<view class="img"><image src="@/static/img/20.png" mode="widthFix"></image></view>
						<text>分享</text>
					</button>
				</view>
			</view>
			<!-- 评论 -->
			<view class="comment" v-if="!$status">
				<view class="public_head"><span class="title">评论</span></view>
				<view class="comment_input">
					<u-input :clearable="false" @click="openInput(false)" :disabled="true" border-color="rgba(0,0,0,.1)" :border="true" :auto-height="true" placeholder="我有话要说..." />
				</view>
				<view class="comment_list">
					<view class="comment_item" v-for="(item, index) in comment_list" :key="index">
						<!-- 一级评论 -->
						<view class="comment_body">
							<view class="left">
								<u-avatar size="80" :src="item.outimg" :show-sex="item.privacy == 1 ? true : false" :sex-icon="item.gender == 0 ? 'man' : 'woman'"></u-avatar>
							</view>
							<view class="right">
								<view class="name">
									{{ item.name }}
									<view class="wall" v-if="info.u_id == item.p_id" style="background-color: #ffd32a;">楼主</view>
								</view>
								<!-- <view class="comment_text">{{ item.content }}</view> -->
								<view class="comment_text">
									<u-parse :tag-style="styles" :html="item.content" :use-cache="true" :lazy-load="true" :show-with-animation="true" :selectable="true"></u-parse>
								</view>
								<view class="reply">
									<!-- 回复按钮 -->
									<view class="reply_btn" @click="openInput(item.id, item.name)">回复</view>
									<view class="date">
										<span style="margin-left: 10rpx;"><uni-dateformat format="MM-dd hh:mm:ss" :threshold="[600000, 3600000]" :date="item.create_time"></uni-dateformat></span>
									</view>
								</view>
							</view>
						</view>

						<view class="comment_list_item" v-for="(li, i) in item.comment_list" :key="i">
							<view class="left"><u-avatar size="80" :src="li.outimg" :show-sex="li.privacy == 1 ? true : false" :sex-icon="li.gender == 0 ? 'man' : 'woman'"></u-avatar></view>
							<view class="right">
								<view class="name">
									{{ li.name }}
									<view class="wall" v-if="info.u_id == li.p_id" style="background-color: #ffd32a;">楼主</view>
								</view>
								<!-- <view class="comment_text">{{ li.content }}</view> -->
								<view class="comment_text">
									<u-parse :tag-style="styles" :html="li.content" :use-cache="true" :lazy-load="true" :show-with-animation="true" :selectable="true"></u-parse>
								</view>
								<view class="reply">
									<view class="date">
										<span><uni-dateformat format="MM-dd hh:mm:ss" :threshold="[600000, 3600000]" :date="li.create_time"></uni-dateformat></span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="50" duration="100">
			<view class="comment_popup">
				<view class="title">发表评论</view>
				<image v-show="!win_select" @click="win_select = !win_select" src="@/static/img/arrawsalt.png" mode="widthFix" class="img"></image>
				<image v-show="win_select" @click="win_select = !win_select" src="@/static/img/shrink.png" mode="widthFix" class="img"></image>
				<scroll-view scroll-y="true" style="max-height: 60vh;" :style="{ maxHeight: win_select ? '75vh' : '40vh' }">
					<view>
						<editor
							:style="{ minHeight: win_select ? '75vh' : '120rpx' }"
							:show-img-size="true"
							:show-img-toolbar="true"
							id="editor"
							:show-img-resize="true"
							class="ql-container"
							:placeholder="placeholder"
							@ready="onEditorReady"
							@input="input"
						></editor>
					</view>
				</scroll-view>
				<view class="toolbar">
					<view class="icon_img" @touchend.stop="format"><i class="iconfont icon-charutupian" @touchend.stop="insertImage"></i></view>
					<view class="submit" @click="submit_comment">发送</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
var _self;
import { article_info, comment_list } from '@/api/index.js';
import { comment_add } from '@/api/user.js';
export default {
	data() {
		return {
			share: {
				title: ''
			},
			info: {
				title: '加载中...',
				name: '加载中...',
				content: '加载中...',
				create_time: '',
				anonymous: false
			},
			style: {
				a: 'color:#007AFF'
			},
			styles: {
				img: 'width:auto !important'
			},
			hidden: false,
			placeholder: '我有话要说...',
			show: false, //弹出层评论
			value: null,
			timer: null,
			win_select: false, //全屏文章编辑器
			comment_list: [], //评论列表
			com_id: '' //回复谁的ID
		};
	},
	methods: {
		input(data) {
			//失去焦点时获取输入框内容
			clearTimeout(this.timer); //节流操作
			this.timer = null;
			this.timer = setTimeout(() => {
				console.log(data.detail.html, '输入的内容'); //text
				this.value = data;
			}, 500);
		},
		submit_comment() {
			//提交评论
			if (!this.value) {
				return uni.showToast({
					title: '内容不能为空！',
					icon: 'error'
				});
			}
			if (this.value.detail.text.length < 4) {
				return uni.showToast({
					title: '多说几个字吧！',
					icon: 'error'
				});
			}
			uni.showLoading();
			let obj = {
				content: this.value.detail.html, //输入的文字
				a_id: this.info.id //文章ID
			};
			if (this.com_id) {
				obj.com_id = this.com_id; //向谁回复 没有则为一级评论
			}
			comment_add(obj)
				.then(res => {
					console.log(res, '添加评论|回复');
					uni.hideLoading();
					if (res.code == 200) {
						this.value = null;
						this.getComment(this.info.id);
						this.show = false; //关闭编辑器
						_self.editorCtx.undo(); //清空编辑器
						uni.showToast({
							title: this.com_id ? '回复成功' : '评论成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.data,
							icon: 'error'
						});
					}
				})
				.catch(err => {
					uni.hideLoading();
				});
			console.log(this.value, '输入的内容');
		},
		getComment(id) {
			//获取用户评论
			if (this.$status) {
				return;
			}
			comment_list({
				id
			}).then(res => {
				console.log(res, '评论列表');
				this.comment_list = res.data.data;
			});
		},
		getInfo(id) {
			//根据ID获取文章详细
			uni.showLoading();
			article_info(id)
				.then(res => {
					uni.hideLoading();
					console.log(res, '文章详细');
					if (res.code == 200) {
						this.getComment(res.data.id);
						this.info = res.data;
						this.share = {
							title: res.data.title,
							desc: '用户：' + res.data.name + ' 发布时间：' + res.data.create_time
						};
						this.$set_title(res.data.title);
					} else {
						this.info.title = '加载失败！';
						uni.showToast({
							title: res.data,
							icon: 'error'
						});
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
					this.info.title = '加载失败！';
					uni.showToast({
						title: '加载失败！',
						icon: 'error'
					});
				});
		},
		openInput(id, name) {
			//写评论 | 回复
			if (id && name) {
				this.placeholder = '回复@' + name;
				this.com_id = id;
				this.show = true;
			} else {
				this.show = true;
				this.placeholder = '我有话要说...';
			}
		},
		onEditorReady() {
			uni
				.createSelectorQuery()
				.select('#editor')
				.context(function(res) {
					_self.editorCtx = res.context;
				})
				.exec();
		},
		insertImage() {
			// const that = this;
			uni.chooseImage({
				count: 1,
				success: function(res) {
					let filePath = res.tempFilePaths[0];
					uniCloud.uploadFile({
						filePath: filePath,
						cloudPath: new Date().getTime() + '.png',
						onUploadProgress: function(progressEvent) {},
						success(res) {
							_self.editorCtx.insertImage({
								src: res.fileID,
								width: '50%',
								success: function() {
									console.log('插入图片成功');
								}
							});
						},
						fail() {},
						complete() {}
					});
				}
			});
		}
	},
	onLoad(data) {
		this.getInfo(data.id);
		_self = this;
	}
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
@import '@/static/iconfont.css';

/deep/.ql-editor.ql-blank:before {
	font-style: normal;
	color: #c8c9cb;
}

.wall {
	display: inline-block;
	border-radius: 10rpx;
	color: #fff;
	padding: 0 10rpx;
	line-height: 1.5;
	font-size: 25rpx;
	margin: auto 0 auto 10rpx;
	white-space: nowrap;
}

.comment_popup {
	padding: 30rpx;
	position: relative;

	.img {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 35rpx;
		height: 35rpx;
	}

	.title {
		padding-bottom: 20rpx;
		font-size: 28rpx;
		color: #7c7c7c;
	}

	.ql-container {
		height: auto;
		min-height: 120rpx;
	}

	.toolbar {
		display: flex;
		padding-top: 20rpx;

		.icon_img {
			.iconfont {
				font-size: 45rpx;
			}
		}

		.submit {
			margin: auto 0 auto auto;
		}
	}
}

.content {
	.public_head {
		padding: 0 0 20rpx;
		line-height: 1;

		> .title {
			border-left: 8rpx solid #ff7605;
			font-size: 38rpx;
			font-weight: 300;
		}
	}

	.head_info {
		padding: 0 30rpx 20rpx;
		display: flex;
		background-color: #fff;

		.info_right {
			flex: 1;
			overflow: hidden;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.name {
				font-size: 32rpx;
				display: flex;

				.toUserInfo {
					//查看用户资料
					margin: auto 2rpx auto auto;
					padding: 5rpx 20rpx;
					font-size: 24rpx;
					box-shadow: 0 0 1rpx 1rpx #ddd;
					color: #777;
					border-radius: 25rpx;
				}
			}

			.date {
				font-size: 26rpx;
				color: #c0c0c0;
			}
		}
	}

	.info_content {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #ffffff;
		.share {
			display: flex;
			justify-content: center;
			padding: 50rpx 0;
			.item {
				display: flex;
				flex-direction: column;
				border: none;
				background-color: transparent;
				font-size: 28rpx;
				&::after {
					border: none;
				}
				.img {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					background-color: #f5f5f5;
					border-radius: 50%;
					image {
						margin: auto;
						width: 60%;
						height: auto;
					}
				}
				text {
					text-align: center;
					line-height: 2;
				}
			}
		}
		.hidden_img {
			padding-bottom: 20rpx;

			.hidden_title {
				display: flex;

				.left {
				}

				.right {
					margin: auto 0 auto auto;
					.icon {
						transition: 0.2s ease-in-out;
						&.active {
							transform: rotate(90deg);
						}
					}
				}
			}
		}

		> .title {
			font-size: 34rpx;
			font-weight: 300;
			border-bottom: 1rpx solid #f8f8f8;
			padding-bottom: 20rpx;
		}

		> .text {
			margin-top: 20rpx;
		}
	}

	.comment {
		padding: 30rpx;
		background-color: #fff;

		.comment_input {
			margin: 10rpx 0 30rpx 0;
		}

		.comment_list {
			.comment_list_item {
				display: flex;
				margin: 20rpx 0 20rpx 80rpx;
				padding: 20rpx 0 20rpx 0;
				border-top: 1rpx solid #eee;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border: none;
					margin-bottom: 0;
					padding-bottom: 0;
				}
			}

			.comment_item {
				margin: 20rpx 0;
				padding: 0 0 20rpx;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border: none;
					margin-bottom: 0;
				}

				.comment_body {
					display: flex;
				}

				.left {
				}

				.right {
					padding-left: 20rpx;

					.name {
						font-size: 30rpx;
					}

					.comment_text {
						font-weight: 300;
						padding: 10rpx 0;
					}

					.reply {
						display: flex;
						font-size: 26rpx;

						.reply_btn {
							color: #2c405a;
						}

						.date {
							color: #c0c0c0;
						}
					}
				}
			}
		}
	}
}
</style>
